<template>
  <div class="flex">
    <div class="h">
      <div class="header">
        <i class="glyphicon glyphicon-envelope ico" id="head-left" @click="Shows"></i>
        <span>今日头条 <i class="glyphicon glyphicon-repeat ico"></i></span>

        <router-link tag="i" to="/sou" class="glyphicon glyphicon-search ico" id="head-right"></router-link>
      </div>
      <div class="list-box" id="outbox">
        <ul class=" list-boxs clearfix">
          <!--<li class="list">推荐</li>-->
          <router-link to="/one/tj" tag="li" class="list" active-class="active">推荐</router-link>
          <router-link to="/one/sp" tag="li" class="list" active-class="active">视频</router-link>
          <router-link to="/one/rd" tag="li" class="list" active-class="active">热点</router-link>
          <router-link to="/one/sh" tag="li" class="list" active-class="active">社会</router-link>
          <router-link to="/one/yl" tag="li" class="list" active-class="active">娱乐</router-link>
          <router-link to="/one/js" tag="li" class="list" active-class="active">军事</router-link>
          <router-link to="/one/kj" tag="li" class="list" active-class="active">科技</router-link>
          <router-link to="/one/qc" tag="li" class="list" active-class="active">汽车</router-link>
          <router-link to="/one/ty" tag="li" class="list" active-class="active">体育</router-link>
          <router-link to="/one/cj" tag="li" class="list" active-class="active">财经</router-link>
          <router-link to="/one/sh" tag="li" class="list" active-class="active">社会</router-link>
          <router-link to="/one/yl" tag="li" class="list" active-class="active">娱乐</router-link>
          <router-link to="/one/js" tag="li" class="list" active-class="active">军事</router-link>
          <router-link to="/one/kj" tag="li" class="list" active-class="active">科技</router-link>
          <router-link to="/one/qc" tag="li" class="list" active-class="active">汽车</router-link>
        </ul>
        <router-link tag="span" to="/add" class="list" id="add">+</router-link>
      </div>

    </div>
    <div class="alerts" v-show="isShows">
      <p @click="Shows">X</p>
    </div>

    <div class="body-box" id="body-box">
      <router-view></router-view>
    </div>


  </div>
</template>

<script>
  import fontSize from '@/assets/js/font-size'
  import  '../assets/js/iscroll'

  export default {
    data(){
      return {
        isShows: false
      }
    },
    components: {},
    methods: {
      Shows(){
        this.isShows = !this.isShows;
        console.log(1111111111111)
      }
    },
    mounted: function () {
      new IScroll('#outbox', {scrollX: true, scrollY: false});
      new IScroll('#body-box', {scrollX: false, scrollY: true});
    }
  }
</script>


<style lang="scss">
  @import "../assets/css/base.css";

  @function rem($px) {
    @return $px / 20 + rem
  }
.flex{
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100vh;
}
  .clearfix:after {
    display: block;
    clear: both;
    content: ' ';
  }

  .h {
    width: 100%;
    position: relative;
    .header {
      width: 100%;

      height: rem(54);
      background: #d63c39;
      text-align: center;

      position: relative;
      & > .ico {
        font-size: rem(35);
        color: #ffffff;
        position: absolute;
        line-height: rem(54);
      }
      #head-left {
        left: rem(10);
      }
      #head-right {
        right: rem(10);
      }
      span {
        font-size: rem(30);
        line-height: rem(54);
        color: #ffffff;
        & > .ico {
          font-size: rem(20);
        }
      }
    }
    .list-box {
      height: rem(58);

      width: 100%;
      overflow: hidden;
      background: #f7f7f7;
      .list-boxs {
        width: rem(1500);
        & > .list {
          color: #525152;
          float: left;
          font-size: rem(30);
          height: rem(58);
          line-height: rem(58);
          width: rem(100);
          text-align: center;
        }
        .active {
          color: red;
        }
      }
      #add {
        position: absolute;
        right: 0;
        bottom: 0;
        font-size: rem(50);
        color: red;
        padding: 0 rem(10);
        background: #fafafa;
        z-index: 2;
        height: rem(58);
        line-height: rem(58);
      }

    }
  }

  .body-box {
    flex-grow: 1;
    overflow: hidden;
  }

  .alerts {
    z-index: 3;
    width: rem(400);
    height: rem(300);
    border-radius: rem(30);
    background: #fafafa;
    border: 1px solid gray;
    position: fixed;
    left: 50%;
    top: 50%;
    margin-left: - rem(200);
    margin-top: - rem(300);
    p {
      position: absolute;
      right: rem(5);
      top: rem(5);
      color: black;
      font-weight: bold;
      font-size: rem(40);
    }
  }
</style>
